<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>个人博客-分类页</title>
    <!-- 引入vue.js -->
    <script src="../node_modules/vue/dist/vue.js"></script>
    <!-- 引入vue-resource -->
    <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
    <!-- 引入Element-UI样式 -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <!-- 引入Element-UI组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 基本样式 -->
    <link rel="stylesheet" href="../assets/css/reset.css" />
    <link rel="stylesheet" href="../assets/css/blog.css" />
    <link rel="stylesheet" href="../assets/css/common.css" />
    <!-- icon -->
    <link
      rel="stylesheet"
      href="//at.alicdn.com/t/font_3010787_sbtn2g4e0o.css"
    />
  </head>
  <body>
    <div id="app" class="container">
      <!-- 顶栏 -->
      <header class="header grid">
        <div class="logo-wrapper grid-cell u-lof4">
          <img src="../assets/images/Logo01.png" alt="" />
        </div>
        <div class="menu grid-cell">
          <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            active-text-color="#f13b3a"
          >
            <el-menu-item index="1">Home</el-menu-item>
            <el-submenu index="2">
              <template slot="title">Category</template>
              <el-menu-item
                v-for="category in categories"
                :key="category.category_id"
                :index="`2-${category.category_id}`"
                >{{category.category_alias}}</el-menu-item
              >
            </el-submenu>
            <el-menu-item index="3">Contact Author</el-menu-item>
          </el-menu>
        </div>
        <div class="login grid-cell u-lof4">
          <a href="http://localhost:8080/login">
            <i class="el-icon-user-solid"></i>
            Administrator Login
          </a>
        </div>
      </header>
      <div class="main">
        <div class="top">
          <h1>Blog Reading</h1>
          <span><a href="./index.html">首页</a></span>
          <span>阅读博文</span>
        </div>
        <div class="center">
          <h2 class="title">{{blog.title}}</h2>
          <div class="info">
            <span class="author">
              <i class="iconfont icon-zuozhe"></i>{{blog.author}}</span
            >
            <span class="pubdate">
              <i class="iconfont icon-shijian"></i>{{blog.pubdate}}</span
            >
            <span class="category">
              <i class="iconfont icon-fenlei"></i>{{blog.alias}}</span
            >
            <span class="clicks">
              <i class="iconfont icon-dianjiliang"></i>{{blog.clicks}}</span
            >
          </div>
          <div class="content">
            <p class="abstract">摘要 {{blog.abstract}}</p>
            <div v-html="blog.content">{{blog.content}}</div>
          </div>
        </div>
      </div>
      <!-- 底部 -->
      <footer>
        <img src="../assets/images/Logo01.png" alt="logo" />
        <div>
          <el-button
            v-for="category in categories"
            type="info"
            round
            size="mini"
          >
            <a
              :href="['./category.html?'+category.category_id]"
              style="color: #fff"
              >{{category.category_alias}}</a
            >
          </el-button>
        </div>
        <div class="contact">
          <a href="#"><i class="iconfont icon-weixin"></i></a>
          <a href="#"><i class="iconfont icon-qq"></i></a>
          <a href="#"><i class="iconfont icon-facebook"></i></a>
        </div>
      </footer>
      <!-- 版权 -->
      <div class="copyright">
        Copyright © 2021.XinZhongDi Education All rights reserved
      </div>
    </div>

    <script>
      const vm = new Vue({
        el: '#app',
        data() {
          return {
            activeIndex: '2-1',
            blog_id: null,
            categories: [],
            blog: {},
          }
        },
        created() {
          //从URL解析文章id
          this.blog_id = location.search.replace('?', '')
          this.getCategories()
          this.getBlog(this.blog_id)
        },

        methods: {
          getCategories() {
            //发送请求所有类别
            this.$http
              .get('http://127.0.0.1:7001/API/V1/categories/statistics')
              .then((res) => {
                const {
                  data: { result },
                } = res

                this.categories = result.category_statistics
                //console.log(this.categories)
              })
          },

          getBlog(id) {
            //根据id获取博文
            //更新blog数据
            //发送请求, 点击量+1
            this.$http
              .get('http://127.0.0.1:7001/API/V1/articles/' + id, {
                params: { hasArticleInfo: 1 },
              })
              .then((res) => {
                const {
                  data: { result },
                } = res
                //console.log(res)
                this.blog = result.article
                //console.log(this.blog)
              })
          },
          handleSelect(key, keyPath) {
            let id = key.split('-')[1]
            //当点击某个类别时, 跳转页面
            if (key.split('-')[0] == 2) {
              window.location.href = './category.html?' + id
              this.activeIndex = `2-${id}`
            }
            if (key.split('-')[0] == 1) {
              window.location.href = './index.html'
              this.activeIndex = '1'
            }
            if (key.split('-')[0] == 3) {
              window.location.href = './contactAuthor.html'
              this.activeIndex = '3'
            }
          },
        },
      })
    </script>
  </body>
</html>
